<template>
  <div class="container">
    <div id="bpmn_root" class="bpmn-root canvas"></div>
    <div class="properties-panel-parent" id="properties-panel"/>
    <div :class="'bpmn-perperties-panel-container ' + (showPanel ? 'show-panel' : 'hide-panel')">
      <div class="panel-container-toggle" @click="showPanel=!showPanel">
        <i :class="showPanel ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
      </div>
      <customer-properties-panel :bpmnElement="bpmnElement" ref="propertiesPanel"></customer-properties-panel>
    </div>
  </div>

</template>

<script>
  import BpmnJs from '@/bpmn';
  import CustomerPropertiesPanel from "./components/bpmnPropertiesPanel/index.vue";
  import {markRaw} from "vue";
  import cmd from "@/bpmn/Modeler/cmd";
  import activitiModdleDescripor from "@/bpmn/Modeler/models/flowModel.json";
  import defaultXML from "@/bpmn/resources/defaultBpmn";

  export default {
    name: "vue-bpmn",
    components: {
      "customer-properties-panel": CustomerPropertiesPanel
    },
    data(){
      return {
        bpmnElement: null,
        showPanel: true,
        showPalette: true
      }
    },
    props: {
      initBpmnXML: {
        type: String
      },
    },
    setup(){
      let modelerObj = markRaw({
        modeler: null
      });
      return {
        modelerObj
      }
    },
    provide(){
      return{
        modelerObj: this.modelerObj
      }
    },
    mounted() {
      const modeler = new BpmnJs({
        container: "#bpmn_root",
        propertiesPanel: {
          parent: '#properties-panel',
        },
        $v: this,
        additionalModules: [
          cmd
        ],
        
        moddleExtensions: {
          activiti: activitiModdleDescripor
        }
      });
      this.modelerObj.modeler = modeler;
      modeler.init();
      modeler.importXML(this.initBpmnXML?.content || defaultXML());
    },
    unmounted(){
      this.modelerObj.modeler.destroy();
    }
  }
</script>

<style scoped lang="scss">
  @import "./Bpmn.scss";
  @mixin common-container($width, $showClass, $hideClass, $left, $right, $toggleClass, $toggleDirection){
    height: 100%;
    width: $width;
    position: absolute;
    left: $left;
    right: $right;
    top: 0;
    transition: transform .5s;
    background: #f8f8f8;
    border: 1px solid #ccc;
    z-index: 1000;
    &.#{$showClass}{
      transform: translateX(0);
    }
    &.#{$hideClass}{
      @if $left == auto{
        transform: translateX($width);
      }@else{
        transform: translateX(-$width);
      }
    }
    .#{$toggleClass}{
      position: absolute;
      top: 50%;
      margin-top: -30px;
      height: 60px !important;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      width: 15px;
      cursor: pointer;
      @if($toggleDirection==left){
        right: -15px;
        border-left: 15px solid #9b9b9b;
      }@else{
        left: -15px;
        border-right: 15px solid #9b9b9b;
      }
      i{
        position: absolute;
        font-size: 15px;
        top: 50%;
        margin-top: -5px;
        color: white;
        #{$toggleDirection}: -15px;
      }
    }
  }
  .container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    @include flex-style(flex, auto, row);

    .bpmn-palette-container{
      @include common-container(150px, show-palette, hide-palette, 0 , auto, palette-container-toggle, left);
    }
    .bpmn-root{
      flex: auto;
      border: 1px solid #ccc;
      height: 600px;
      :deep(.djs-container .djs-overlay-container){
        z-index: 900;
      }
      :deep(.djs-container svg){
        position: absolute;
      }
    }
    .bpmn-perperties-panel-container{
      @include common-container(350px, show-panel, hide-panel, auto , 0, panel-container-toggle, right);
    }
  }
</style>